import React from 'react'
import { useDispatch } from 'react-redux'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import avatorDefault from '../../assets/avator_default.png'
import { Layout, Avatar, Dropdown } from 'antd'
import './index.css'

import { collapseMenu } from '../../store/reducers/tab'

const { Header } = Layout

const CommonHeader = ({ collapsed }) => {

  const dispatch = useDispatch()

  const handleLayout = () => { }

  const items = [
    {
      key: '1',
      label: <a target="_blank">个人中心</a>,
    },
    {
      key: '2',
      label: (
        <a onClick={handleLayout} target="_blank">
          退出
        </a>
      ),
    },
  ]
  return (
    <Header className="site-header">
      {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'trigger',
        onClick: () => dispatch(collapseMenu())
      })}
      {/* <Avatar src={<img src={require('../../assets/avator_default.png')} />} /> */}
      {/* <Avatar src={require('../../assets/avator_default.png')} /> */}
      <Dropdown
        menu={{
          items,
        }}
      >
        <Avatar src={avatorDefault} />
      </Dropdown>
    </Header>
  )
}

export default CommonHeader
